{% extends "public/layout.html" %}

{% block css %}
<style>
    #graphite_content{margin-top:20px;margin-left: 20px;margin-bottom:20px;}

</style>

{% endblock %}


{% block body %}

                    <button type="button" class="btn btn-default" id="add_graphite_keys">添加keys</button>



                        <table  class="table table-datatable table-custom" id="basicDataTable">

                            <thead>
                                <tr>
                                  <th>#</th>
                                  <th>key</th>
                                  <th>类型</th>
                                  <th>图形标题</th>
                                  <th>操作</th>
                                </tr>
                              </thead>
                              <tbody>

                                    {% for key in graphite_keys %}
                                        <tr>
                                        <td> {{ forloop.counter }} </td>
                                        <td> {{ key.name }} </td>
                                        <td> {{ key.type }} </td>
                                        <td> {{ key.title }} </td>
                                        <td> <a href="#" class="btn btn-sm btn-default">修改标题</a> </td>
                                        </tr>
                                    {% endfor %}

                              </tbody>
                        </table>


                <div class="tile-footer text-center">
                    <ul class="pagination pagination-sm nomargin pagination-custom">
                        {% if page_obj.has_previous %}
                            <li>
                                <a href="?page={{ page_obj.previous_page_number }}{{ uri }}"><i class="fa fa-angle-double-left"></i></a>
                            </li>
                        {% else %}
                            <li class="disabled">
                                <a href="#"><i class="fa fa-angle-double-left"></i></a>
                            </li>
                        {% endif %}

                        {% for page in page_obj.paginator.page_range %}
                            <li {% if page_obj.number == page %}class="active"{% endif %}><a href="?page={{ page }}{{ uri }}" >{{ page }}</a></li>
                        {% endfor %}

                        {% if page_obj.has_next %}
                            <li>
                                <a href="?page={{ page_obj.next_page_number }}{{ uri }}"><i class="fa fa-angle-double-right"></i></a>
                            </li>
                        {% else %}
                            <li class="disabled">
                            <a href="#"><i class="fa fa-angle-double-right"></i></a>
                            </li>
                        {% endif %}
                    </ul>
                </div>




<div class="modal fade" id="add_graphite_keys_modal" aria-hidden="true">
	<div class="modal-dialog">
	    <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4>添加graphite keys</h4>
            </div>


                <form class="form-horizontal" id="graphite_content">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">key 名称:</label>
                        <div class="col-xs-8">
                            <select class="form-control" name="name" id="graphite_key_input">
                                <option value="">请选择key名称</option>
                                {% for metric in metrics %}
                                    <option value="{{ metric }}">{{ metric }}</option>
                                {% endfor %}
                            </select>

                        </div>
                     </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">key 类型:</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="key_type" id="key_type">
                                <option value="si">si (1000)</option>
                                <option value="binary">binary (1024)</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">图形标题:</label>
                        <div class="col-sm-8">
                        <input type="text" class="form-control" name="title"  id="graphite_title" placeholder="标题">
                        </div>
                     </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-primary" id="graphite_input_button">添加</button>
                        </div>
                    </div>
                </form>


            <div class="modal-footer">
                <input class="btn btn-default" data-dismiss="modal" aria-hidden="true" type="button" value="取消">
            </div>

        </div>
    </div>
</div>
</div>

{% endblock %}



{% block js %}


<script>
$(function(){
    $(".chosen-select").chosen({disable_search_threshold: 10});
    $("#add_graphite_keys").click(function(){
        $('#add_graphite_keys_modal').modal('show');
    });
    $("#graphite_input_button").click(function(){
        graphite_key_input = $("#graphite_key_input");
        graphite_key_name = graphite_key_input.val();

        key_type_select = $("#key_type");
        key_type_value = key_type_select.val();

        graphite_title_input = $("#graphite_title");
        graphite_title_value = graphite_title_input.val()

        if (graphite_key_name == ""){
            swal("操作失败!", "graphite key 不能为空", "error");
        }

        if (graphite_title_value == ""){
            swal("操作失败!", "图形标题不能为空", "error");
        }

        $.post("/graphite/keys/", { "name": graphite_key_name , "type":key_type_value, "title":graphite_title_value},
            function(res){
                console.log(res)
                if(res.status == 0){
                    swal("操作成功!", "", "success");
                    $(".confirm").click(function(){
                        window.location.reload()
                    });
                }else{
                    swal("操作失败", res.errmsg, "error");
                }
            });
        graphite_key_input.val('');
        $('#add_graphite_keys_modal').modal('hide');
    });


})
</script>

{% endblock %}